<template>
  <div class="qs-answer">
    <!-- 选中时显示题目设置，添加或编辑题目时 -->
    <div class="answer-score" v-if="!isBlur">
      <span>题目分数：</span>
      <el-select v-model="formItem.referScore" size="small" style="width: 60px">
        <el-option v-for="item in scoreArr" :key="item" :label="item" :value="item" />
      </el-select>
      <el-button link type="primary" @click="handleAnswerSetting">题目设置</el-button>
    </div>
    <!-- 失焦显示答案和解析 -->
    <div class="answer-refer" v-if="props.isAnswerSet || formItem.referAnalysis">
      <div v-if="props.isAnswerSet">
        <span class="answer-refer-title">正确答案：</span>
        <span class="answer-refer-content">{{referAnswerFomat(formItem.referAnswer)}}</span>
      </div>
      <div v-if="formItem.referAnalysis">
        <span class="answer-refer-title">答案解析：</span>
        <span class="answer-refer-content">{{formItem.referAnalysis}}</span>
      </div>
    </div>
    <!-- 答案设置 -->
    <el-dialog :title="isAnswerSet ? '请设置正确答案' : '请设置答案解析'" v-model="showAnswerSetting" width="30%" append-to-body @close="answerSettingClose">
      <el-form label-width="110px" label-position="right" ref="answerFormRef" :model="answerForm" :rules="answerFormRules">
        <el-form-item v-if="props.isAnswerSet" label="设置正确答案" :prop="props.isAnswerSet ? 'referAnswer' : ''">
          <el-select v-model="answerForm.referAnswer" placeholder="点击选择正确答案" :multiple="props.isMultiple" style="width: 100%;">
            <el-option :label="item.label || item.placeholder" :value="item.label || item.placeholder" v-for="(item,index) in formItem.default" :key="index" />
          </el-select>
        </el-form-item>
        <!-- 多选题目得分规则项 -->
        <el-form-item v-if="['checkbox', 'selectMultiple'].includes(formItem.type)" label="少选得分规则">
          <el-radio-group v-model="answerForm.lackRule" @change="lackRuleChange">
            <el-radio :label="0" style="margin-right: 10px;">少选不得分</el-radio>
            <el-radio :label="1">少选固定得分</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="answerForm.lackRule" label="部分答对得">
          <el-input-number v-model="answerForm.lackScore" :min="0" :max="formItem.referScore" />
        </el-form-item>
        <!-- 不同题型答案设置项添加 -->
        <el-form-item label="设置答案解析">
          <el-input v-model="answerForm.referAnalysis" type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入答案解析" />
        </el-form-item>
        <!-- 难度等级 -->
        <el-form-item label="难度等级">
          <el-radio-group v-model="answerForm.difficultyLevel">
            <el-radio :label="1" style="margin-right: 10px;">简单</el-radio>
            <el-radio :label="2" style="margin-right: 10px;">中等</el-radio>
            <el-radio :label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 是否需要仲裁 -->
        <el-form-item v-if="!props.isAnswerSet" label="是否需要仲裁">
          <el-radio-group v-model="answerForm.useArbitration">
            <el-radio :label="0" style="margin-right: 10px;">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 需要仲裁的分数 -->
        <el-form-item v-if="answerForm.useArbitration" label="需要仲裁的分数">
          <el-input-number v-model="answerForm.arbitrationScore" :min="1" :max="formItem.referScore - 1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="showAnswerSetting = false">取消</el-button>
          <el-button type="primary" @click="handleAnswerSettingConfirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/* eslint-disable */
import { ref, computed, onMounted, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'

const props = defineProps({
  formItem: {
    type: Object,
  },
  isMultiple: {
    type: Boolean,
    default: false
  },
  isAnswerSet: {// 是否设置参考答案（一些题目如简答题不设答案）
    type: Boolean,
    default: true
  }
})
const store = useStore()
const formItem = computed(()=>{return props.formItem})
const isBlur = computed(()=>{
  return store.getters.formDesignInfo.formCmpId && formItem.value.formItemId !== store.getters.formDesignInfo.formCmpId
})
// const typeId = computed(()=>{return store.getters.formDesignInfo.publishSetting.typeId})
// console.log('typeId',store.getters.formDesignInfo)
const referAnswerFomat = () => {
  let answer = '未设置'
  if(formItem.value.referAnswer){
    if(Array.isArray(formItem.value.referAnswer)){
      answer = formItem.value.referAnswer.join('、')
    }else{
      answer = formItem.value.referAnswer
    
    }
  }
  return answer
}
// 得分规则切换，分数归零
const lackRuleChange = () => {
  answerForm.value.lackScore = 0
}
// 分数生成
const scoreArr = ref([])
function generateArray() {
  let array = []
  let step = 0.5
  let value = 0
  while (value <= 100) {
    array.push(value)
    if (value < 5) {
      value += step
    } else {
      step = 1
      value += step
    }
  }
  return array
}
// 答案及解析设置
const showAnswerSetting = ref(false)
const answerForm = ref({})
const answerFormRef = ref(null)
const answerFormRules = reactive({
  referAnswer: [
    { required: true, message: '请选择正确答案', trigger: 'blur' }
  ]
})
const handleAnswerSetting = () => {
  // 添加答案属性后，需要在此添加回显属性
  const { referAnswer, referAnalysis, lackRule, lackScore, useArbitration, arbitrationScore, difficultyLevel } = formItem.value
  referAnswer === undefined ? '' : answerForm.value.referAnswer = referAnswer
  referAnalysis === undefined ? '' : answerForm.value.referAnalysis = referAnalysis
  lackRule === undefined ? '' : answerForm.value.lackRule = lackRule
  lackScore === undefined ? '' : answerForm.value.lackScore = lackScore
  useArbitration === undefined ? '' : answerForm.value.useArbitration = useArbitration
  arbitrationScore === undefined ? '' : answerForm.value.arbitrationScore = arbitrationScore
  difficultyLevel === undefined ? '' : answerForm.value.difficultyLevel = difficultyLevel
  showAnswerSetting.value = true
}
const answerSettingClose = () => {
  answerForm.value = {}
  answerFormRef.value.resetFields()
}
const handleAnswerSettingConfirm = () => {
  answerFormRef.value.validate((valid) => {
    if (valid) {
      // 添加答案属性后，需要在此添加属性
      const { referAnswer, referAnalysis, lackRule, lackScore, useArbitration, arbitrationScore, difficultyLevel } = answerForm.value
      referAnswer === undefined ? '' : formItem.value.referAnswer = referAnswer
      referAnalysis === undefined ? '' : formItem.value.referAnalysis = referAnalysis
      lackRule === undefined ? '' : formItem.value.lackRule = lackRule
      lackScore === undefined ? '' : formItem.value.lackScore = lackScore
      useArbitration === undefined ? '' : formItem.value.useArbitration = useArbitration
      arbitrationScore === undefined ? '' : formItem.value.arbitrationScore = arbitrationScore
      difficultyLevel === undefined ? '' : formItem.value.difficultyLevel = difficultyLevel
      showAnswerSetting.value = false
    } else {
      ElMessage.warning('请设置正确答案')
    }
  })
}
onMounted(() => {
  scoreArr.value = generateArray()
  formItem.value.referScore ? '' : formItem.value.referScore = 5
  if(formItem.value.referScore === undefined){
    formItem.value.referScore = 5
  }
  // 简答，上传题目需要人工审核，默认isManual为true
  let manualType = ['input', 'textarea', 'fileUpload', 'imgUpload']
  if(formItem.value.isManual === undefined && manualType.includes(formItem.value.type)){
    formItem.value.isManual = true
  }
  // 多选类型默认少选得分规则为少选不得分
  if(formItem.value.lackRule === undefined && ['checkbox', 'selectMultiple'].includes(formItem.value.type)){
    formItem.value.lackRule = 0
    formItem.value.lackScore = 0
  }
})
</script>

<style lang='scss' scoped>
.qs-answer{
  .answer-score{
    display: flex;
    align-items: center;
    padding-top: 5px;
    width: 100%;
    border-top: 1px solid #e7e9eb;
    span{
      color: #606266;
    }
    .el-select{
      margin-right: 10px;
    }
  }
  .answer-refer{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding-top: 5px;
    width: 100%;
    border-top: 1px solid #e7e9eb;
    div{
      display: flex;
      align-items: center;
      overflow: hidden;
      width: calc((100% - 10px) / 2);
    }
    .answer-refer-title{
      color: #606266;
    }
    .answer-refer-content{
      display: inline-block;
      width: calc(100% - 70px);
      color: #767c85;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>